<template>
  <div>
   <div class="bigbox">
     <div class="header">
      <h1 @click="fun()">&lt;</h1>
      <h2>一键预约&nbsp;专属服务</h2>       
     </div>
     <div class="himg">
       <img src="img/yueimg/26.jpg" >
     </div>
     <div class="mian">
       <div class="mian-con">
         <div class="mian-con-a">尊敬的**********客户,您当前还不是宽带用户,快去预约安装吧</div>
         <div class="mian-con-b">
           <div class="mian-con-b-one">
             <div class="mian-con-b-one-tubiao" >
               <span class="iconfont icon-kuandai"></span>
             </div>
             <span class="mian-con-b-one-Bfont">我需要一条新宽带</span><br>
             <span class="mian-con-b-one-font">300M起,我要与世界更进一步</span>
           </div>
           <div class="mian-con-b-two">
             <div><span class="iconfont icon-yuyue"></span><br><span class="mian-con-b-two-font">一键预约</span></div>
             <div><span class="iconfont icon-dianhua"></span><br><span class="mian-con-b-two-font">24小时联系</span></div>
             <div><span class="iconfont icon-anzhuang"></span><br><span class="mian-con-b-two-font">上门安装</span></div>
             <div><span class="iconfont icon-shouhou"></span><br><span class="mian-con-b-two-font">专人售后</span></div>
           </div>
         </div>
         <div class="mian-con-c">
           <div class="mian-con-c-tubiao"><span class="iconfont icon-shouye"></span></div>
           <span class="mian-con-c-one-Bfont">我需要给宽带续费</span><br>
           <span class="mian-con-c-one-font">续享超值服务</span>
         </div>
         <div class="mian-con-d">
           <div  class="mian-con-d-tubiao"><span class="iconfont icon-shouye"></span></div>
           <span class="mian-con-d-one-Bfont">我需要给宽带续费</span><br>
           <span class="mian-con-d-one-font">续享超值服务</span>
         </div>
         <div class="mian-con-e">
           <div  class="mian-con-e-tubiao"><span class="iconfont icon-shouye"></span></div>
           <span class="mian-con-e-one-Bfont">我需要给宽带续费</span><br>
           <span class="mian-con-e-one-font">续享超值服务</span>
         </div>
         <div class="mian-con-f"><van-button class="button" round type="info" color="#ee8137">立即预约</van-button></div>
         <div class="mian-con-g">预约为免费服务,请您注意接听来电!<br>办理业务以专属客服与您确认的最终结果为主</div>
       </div>
     </div>
   </div>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.bigbox{
  overflow: hidden;
}

.header{
  width: 100%;
  background-color: white;
  height: 0.77rem;
  line-height: 0.77rem;
  position: fixed;
  border-bottom: 1PX solid gray;
  z-index: 9999;
}

.header h1,h2{
  float: left;
}

.header h2{
  margin-left:0.8rem;
}

.himg{
  width: 100%;
  height: 1.65rem;
  margin-top: 0.77rem;
}

.himg img{
  width: 100%;
  height: 100%;
}

.mian{
  width: 100%;
  height: 6.05rem;
  background-image: linear-gradient(to bottom,#8dc4f9,#b2d7fa,#d7ebfc);
}

.mian .mian-con{
  width: 3.4rem;
  height: 5.8rem;
  margin: auto;
  background-image: linear-gradient(to bottom,#fefcf4,#fefaed);
  overflow: hidden;
}

.mian .mian-con .mian-con-a{
  width: 3.16rem;
  margin: auto;
  color: #cbcbca;
  font-size: 0.14rem;
  margin-top: 0.16rem;
}

.mian .mian-con .mian-con-b{
  width: 3.16rem;
  height: 1.52rem;
  background-color: #ddf0fd;
  margin: auto;
  margin-top: 0.2rem;
  overflow: hidden;
}

.mian .mian-con .mian-con-b .mian-con-b-one{
  width: 2.99rem;
  margin: auto;
  margin-top: 0.14rem;
}

.mian .mian-con .mian-con-b .mian-con-b-one .mian-con-b-one-tubiao{
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.5rem;
  background-color: white;
  float: left;
}

.mian .mian-con .mian-con-b .mian-con-b-one .mian-con-b-one-tubiao span{
  font-size: 0.3rem;
  color: blue;
}

.mian .mian-con .mian-con-b .mian-con-b-one .mian-con-b-one-font{
  font-size: 0.10rem;
  color: #9fa1a2;
  margin-left: 0.1rem;
}

.mian .mian-con .mian-con-b .mian-con-b-one .mian-con-b-one-Bfont{
  margin-left: 0.1rem;
}

.mian .mian-con .mian-con-b .mian-con-b-two{
  width: 2.63rem;
  height: 0.65rem;
  margin-left: 0.53rem;
  margin-top: 0.16rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.1rem;
}

.mian .mian-con .mian-con-b .mian-con-b-two span{
  font-size: 0.3rem;
  color: blue;
}

.mian .mian-con .mian-con-b .mian-con-b-two div{
  width: 0.7rem;
  text-align: center;
}

.mian .mian-con .mian-con-b .mian-con-b-two .mian-con-b-two-font{
  font-size: 0.1rem;
  color: #676c70;
}

.mian .mian-con .mian-con-c,.mian-con-d,.mian-con-e{
  width: 3.16rem;
  height: 0.68rem;
  background-color: #ddf0fd;
  margin: auto;
  margin-top: 0.08rem;
}

.mian .mian-con .mian-con-c .mian-con-c-tubiao,.mian-con-d-tubiao,.mian-con-e-tubiao{
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.5rem;
  background-color: white;
  float: left;
  margin-top: 0.12rem;
  margin-left: 0.08rem;
}

.mian .mian-con .mian-con-c .mian-con-c-tubiao span{
  font-size: 0.3rem;
  color: blue;
}

.mian .mian-con .mian-con-d .mian-con-d-tubiao span{
  font-size: 0.3rem;
  color: blue;
}

.mian .mian-con .mian-con-e .mian-con-e-tubiao span{
  font-size: 0.3rem;
  color: blue;
}

.mian .mian-con .mian-con-c .mian-con-c-one-Bfont,.mian-con-d-one-Bfont,.mian-con-e-one-Bfont{
  margin-left: 0.1rem;
}

.mian .mian-con .mian-con-c .mian-con-c-one-font,.mian-con-d-one-font,.mian-con-e-one-font{
  font-size: 0.10rem;
  color: #9fa1a2;
  margin-left: 0.1rem;
}

.mian .mian-con .mian-con-f{
  text-align: center;
  margin-top: 0.2rem;
}

.mian .mian-con .mian-con-f button{
  width: 2.67rem;
  height: 0.41rem;
  color: white;
  
}

.mian .mian-con .mian-con-g{
  width: 3.16;
  margin: auto;
  margin-top: 0.24rem;
  text-align: center;
  font-size: 0.08rem;
  color: #438ff5;
}
</style>